<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		<script type="text/javascript" src="../common/cropper/cropper.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/my_common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
		<style>
			.feedback .message {
				width: 98%;
				background-size: 100% 100%;
			}
		</style>
	</head>

	<body>
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10  pad-r-10">
			<div class="pa back pad-l-10" onclick="back();">
				<a></a>
			</div>
			<div class="center" data-l="1269"></div>
		</header>
		<div id="app" class="wrap_body feedback" v-cloak>
			<img id="image1" :src="url1" alt="Picture" style="display: none;">
			<div class="content pad-t-60 pad-l-12 pad-r-12 pad-b-10">
				<div class="message">
					<div class="pad-t-70 pad-l-20 pad-r-20">
						<div class="opinion">
							<textarea name="" rows="10" cols="40" placeholder="Enter your suggestions here" v-model="txt"></textarea>
						</div>

						<div class="pic cf center ccc pad-t-20" id="pic">
							<template v-if="upimglist.length">
								<div class="fl pic_img mag-t-5" v-for="(item,index) in upimglist" @click="delImg(index)"><img :src="oss+item.src" alt="" /></div>
							</template>

							<div class="fl pic_img f-30 f-b mag-t-5 sec" v-if="upimglist.length<3">+<input type="file" class="pr file" accept="image/*"  @click="android_upphoto($event,5)" /></div>
						</div>

						<div class="center send pr">
							<a class="bon-red9 fff btn" @click="send">{{b_lg[1357]}}</a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = null;

		function refresh() {
			app.txt = "";
		}
	
		//再对图片进行压缩为270*270，再上传到服务器
		var resizeImage_2 = function(src, option,call) {
			var func = func;
			var files = [];
				if(typeof src == "string") src=[src];
				//if()
			var compressImage = function(num) {
				var path = src[num];
				var date = new Date();
				var num1 = Math.round(Math.random()*100+1);
				num1 = date.getTime() + String(num1);
				var option1={
						src: path,
						dst: '_doc/'+ num1 +'.jpg',
						overwrite: true,
						width: '800px',
						height:"auto",
						format: 'jpg',
						quality: 75 //图片质量不再修改，以免失真
					}
				for (var i in option ) {//改变属性
					option1[i] = option[i];
				}
				
				plus.zip.compressImage(option1,
					function(e) {
						plus.nativeUI.closeWaiting();
						files.push(e.target);					
						if(num == src.length - 1) {
							call(files); //全部压缩完成回调
						} else {
							compressImage(num + 1);
						}
					},
					function(err) {
						plus.nativeUI.alert('未知错误！', function() {
							//back();
						});
					}
				);
			}
			compressImage(0);
		}

			
	
	
		function fun1() {
            setlange_obj(); //加载头部语言包
			app = new Vue({
				el: "#app",
				data: {
					b_lg: global_lange, //语言包
					url1: "",
					txt: "",
					//					imgList: "",
					imgNum: 0,
					upimg_area: [(16 / 9), 750, 420], //上传图片尺寸 0：比例，1：宽，2：高
					cropper: null,
					upimglist: [],
					obj: {},
					thum: "",
					imgWidth: "",
					imgHeight: ""

				},
				created: function() {
					this.init();
				},
				mounted: function() {
					var self = this;
					var image = document.getElementById('image1');
					this.cropper = new Cropper(image, {
						aspectRatio: this.upimg_area[0],
						viewMode: 1,
						background: false,
						zoomable: true,
						dragMode: "move",
						dragCrop: false,
						resizable: false,
						cropBoxResizable: false,
						cropBoxMovable: false,
						ready: function() {
							self.croppable = true;
						}
					});

				},
				methods: {
					init: function() {

					},
					gotoart: function(e) {
						clicked(e);
					},
					upLoad: function(e) {
						console.log(e);
						var files = e.target.files || e.dataTransfer.files;
						var file = files[0];
						console.log(file);
						if(window.FileReader) {
							var reader = new FileReader();
							reader.readAsDataURL(file);
							//监听文件读取结束后事件    
							reader.onloadend = function(e) {
								console.log(typeof app.imgList)
								app.url1 = e.target.result;

								app.upPhoto();

							};
						}

					},
					android_upphoto: function(e, i) {
						var $th = this,
							i = i;
						if(isAPP) {
							e.stopPropagation();
							e.preventDefault();
							var btnArray = [{
								title: global_lange['1534']
							}, {
								title: global_lange['1533']
							}];
							plus.nativeUI.actionSheet({
								cancel: global_lange['1535'],
								buttons: btnArray
							}, function(e) {
								var index = e.index;
								switch(index) {
									case 0:
										break;
									case 1:
										var cmr = plus.camera.getCamera();
										cmr.captureImage(function(p) {
											//图片压缩
											resizeImage_2(p, {}, function(files){
												var fils1=files[0].split("/doc/")
												var src2='http://localhost:13131/_doc/'+fils1[1]
												var imgs = new Image();
												imgs.crossOrigin = 'anonymous';
												imgs.src = src2;
												imgs.onload = function() {
													app.url1 = app.getBase64Image(imgs);
													app.upPhoto();
												}
					            			})
											
										}, function(e) {
											mui.alert('失败：' + e.message);
										}, {
											filename: '_doc/',
											index: 1
										});
										break;
									case 2:

										plus.gallery.pick(function(path) {
											//图片压缩
											resizeImage_2(path, {}, function(files){
												var fils1=files[0].split("/doc/")
												var src2='http://localhost:13131/_doc/'+fils1[1]
												var imgs = new Image();
												imgs.crossOrigin = 'anonymous';
												imgs.src = src2;												
												imgs.onload = function() {
													app.url1 = app.getBase64Image(imgs);
													app.upPhoto();
												}
												
					            			})
										}, function(e) {
											console.log('取消选择图片');
										}, {
											filter: 'image'
										});
										break;
								}

							});
						}
					},
					getBase64Image: function(img) {
						var width = img.width > 500 ? 500 : img.width;
						var height = parseInt(img.height / (img.width / 500));
						console.log("宽：" + img.width + "；高：" + img.height);
						console.log("宽：" + width + "；高：" + height);
						var canvas = document.createElement("canvas");
						canvas.width = width;
						canvas.height = height;
						var ctx = canvas.getContext("2d");
						ctx.drawImage(img, 0, 0, width, height);
						var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
						var dataURL = canvas.toDataURL("image/" + ext);
						return dataURL;
					},
					getRoundedCanvas: function(sourceCanvas, w, h) {

						var canvas = document.createElement('canvas');
						var context = canvas.getContext('2d');
						var width = w;
						var height = h;
						canvas.width = width;
						canvas.height = height;
						context.imageSmoothingEnabled = true;
						context.drawImage(sourceCanvas, 0, 0, width, height);
						context.globalCompositeOperation = 'destination-in';
						context.beginPath();
						context.fill();
						return canvas;
					},
					upPhoto: function() {
						var formDate = new FormData();
						var imgUrl = dataURItoBlob(app.url1);
						formDate.append("file", imgUrl, "image.jpg");
						common_ajax(4, formDate, "uploadImg", function(res) {
							console.log(res);
							if(res.status == 1) {
								var imgUrl = res.result.thumb_path;
								app.upimglist.index = res.result.thumb;
								app.upimglist.src = imgUrl;
								var obj = {};
								obj.index = res.result.thumb;
								obj.src = imgUrl;
								app.upimglist.push(obj);
								app.thum += "," + res.result.thumb;

							} else {
								mui.toast(res.msg);

							}
						})
					},
					send: function() {
						//window.location.href="feedback.html?"+Math.random();
						//return false;
						if(app.txt == "") {
							//提示框
							var btnArray2 = [app.b_lg[1503]];
							mui.confirm(app.b_lg[1502], app.b_lg[1050], btnArray2, function(ee) {
								if(ee.index == 1) {
									//确定
									app.init();
								}
							},"div")
						} else {
							app.thum = app.thum.substring(1);
							common_ajax(1, {
								content: app.txt,
								thumblist: app.thum
							}, "feedback", function(res) {
								console.log(res);
								if(res.status == 1) {
									var btnArray2 = [app.b_lg[1049], app.b_lg[1008]];
									mui.confirm(app.b_lg[1504], app.b_lg[1050], btnArray2, function(ee) {
										if(ee.index == 1) {
											//确定
											app.gotoart('feedbackSuccess.html');
										} else {
											//取消
											app.init();
										}
									},"div")

								} else {
									mui.toast(res.msg);
								}
							})
						}

					},
					delImg: function(e) {
						var btnArray2 = [app.b_lg[1049], app.b_lg[1008]];
						mui.confirm("确定删除该照片吗？", app.b_lg[1050], btnArray2, function(ee) {
							if(ee.index == 1) {
								//确定
								app.upimglist.splice(e, 1);
								console.log(app.upimglist);

							} else {
								//取消
								app.init();
							}
						},"div")

					}
				}
			})
		}
	</script>

</html>
